<script setup>
const props = defineProps({
  modelValue:Number
})
const emit = defineEmits(['onSave','onPublish','update:modelValue'])
const router = useRouter();
const goBack = ()=>{
  router.back();
}
const LOGNG_SECOND = 60;

const second = ref(LOGNG_SECOND)
const autoSave = ref(true)
const timer = ref(null);
const startTimer = ()=>{
  timer.value = setInterval(()=>{
    second.value--;
  },1000)
}
const clearTimer = ()=>{
 if(timer.value){
   clearInterval(timer.value)
 }
}
onBeforeUnmount(()=>{
  clearTimer()
})
watchEffect(()=>{
  if(autoSave.value){
    startTimer()
  }else{
    clearTimer()
  }
})
watch(()=>second.value, ()=>{
  if(second.value<=0){
    emit('onSave')
    second.value = LOGNG_SECOND;
  }
})

</script>

<template>
  <div class="h-[50px] px-[15px] w-full flex items-center border-b border-[#ccc] border-b-solid">
    <el-page-header title="返回" class="w-full" @back="goBack">
      <template #content>
        <div class=" flex">
          <div @click="emit('update:modelValue',0)" class="mr20 text-[14px] cursor-pointer title-tab" :class="{ active:modelValue===0 }">
            <el-icon class="relative top-[2px]  text-[16px]"><Edit/></el-icon>
            <span>题目编辑</span>
          </div>
          <div @click="emit('update:modelValue',1)" class="text-[14px] cursor-pointer title-tab" :class="{ active:modelValue===1 }">
            <el-icon class="relative top-[2px] text-[16px]"><MagicStick/></el-icon>
            <span>样式设计</span>
          </div>
        </div>
      </template>
      <template #extra>
        <div class="text-[14px]">
          <el-switch v-model="autoSave"></el-switch>
          自动保存({{second}})
          <el-button class="ml20" type="success" @click="emit('onPublish')" icon="Promotion">发布</el-button>
          <el-button icon="Check" @click="emit('onSave')">保存</el-button>
        </div>
      </template>
    </el-page-header>
  </div>
</template>

<style scoped lang="scss">
.title-tab:hover,
.active{
  color: var(--el-color-primary);
  font-weight: bold;
}
</style>
